<template>
	<view class="container" :style="[{height:scrollH - CustomBar+'px'},{marginTop: CustomBar+'px'}]">
		<cu-custom bgColor="bg-ticket-center" :isBack="true" fatherCss="box-shadow: none;">
			<block slot="backText"></block>
			<block slot="content">收银员</block>
		</cu-custom>
		<view>
			<view class="white">
				<view class='title'>
					<image src="http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/priceBag.png"></image>
					<text>售票员 门店 二维码</text>
				</view>
				<image class="ewm" :src="img"></image>
				<view class="save" @click='getImage'>保存二维码</view>
			</view>
		</view>

		<view class="layer-use share-content" v-if="isShare" @click='hideShareLayer'>
			<image :src="shareImg"></image>
			<view @tap.stop='saveImage'>保存图片</view>
		</view>
		<canvas canvas-id="myCanvas" style='width:1181px;height: 1773px;'></canvas>
	</view>
</template>

<script>
	import {
		promisify
	} from '@/utils/promise.util'
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				img: '',
				shareBanner: '',
				shareQr: '',
				scrollH: 0,
				shopName: '',
				isShare: false,
				shareImg: ''
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight
				}
			})
			this.getInfo()
		},
		methods: {
			getInfo() {
				var that = this;
				this.$request({
					url: '/VerificationUser/getUserQr',
					success: res => {
						if (res.data.status == 1) {
							that.img = res.data.data.pay_qr
							that.shopName = res.data.data.name
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			//点击图片进行预览，长按保存分享图片
			saveImage: function(e) {
				var that = this;
				uni.showLoading({
					title: '保存中',
				})
				uni.saveImageToPhotosAlbum({
					filePath: that.shareImg,
					success: function(res) {
						uni.hideLoading()
						uni.showToast({
							title: '保存成功',
						})
					},
					fail: function(res) {
						uni.showToast({
							title: '保存失败',
							icon: 'error',
							duration: 300
						})
					}
				})
			},
			hideShareLayer() {
				this.isShare = false
			},

			getImage() {
				var that = this;
				if (that.shareImg) {
					that.isShare = true
					return
				}
				uni.showLoading({
					title: '资源整合中~',
				})
				const wxDownloadFile = promisify(uni.getImageInfo)
				Promise.all([
					wxDownloadFile({
						src: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/WeChat1.png?x-oss-process=image/resize,m_fill,h_1773,w_1181'
					}),
					wxDownloadFile({
						src: that.img + '?x-oss-process=image/resize,m_fill,h_668,w_668'
					}),
				]).then(res => {
					that.shareBanner = res[0].path
					that.shareQr = res[1].path
					that.drawCanvas()
				})
			},
			// 单行文本设置
			setText(ctx, textText, font, color) {
				var chr = textText.split(""); //这个方法是将一个字符串分割成字符串数组
				var temp = "";
				var row = [];
				ctx.font = font;
				ctx.setFillStyle(color);
				for (var a = 0; a < chr.length; a++) {
					if (ctx.measureText(temp).width < 668) {
						temp += chr[a];
					} else {
						a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
						row.push(temp);
						temp = "";
					}
				}
				row.push(temp);
				return row
			},
			drawCanvas: function() {
				var that = this;
				const ctx = uni.createCanvasContext('myCanvas', that);
				uni.showLoading({
					title: '支付码生成中'
				})
				// 渲染背景
				const grd = ctx.createLinearGradient(0, 0, 1181, 1773);
				grd.addColorStop(0, '#ffffff');
				grd.addColorStop(1, '#ffffff');
				ctx.setFillStyle(grd); //将渐变色渲染入正方形
				ctx.fillRect(0, 0, 1181, 1773); //起点坐标为（20，20），长宽都为120px的正方形
				ctx.drawImage(that.shareBanner, 0, 0, 1181, 1773);
				// 店铺名称
				var textName = that.shopName;
				var nameRow = that.setText(ctx, textName, "normal bold 64px 微软雅黑 ", '#333')
				textName = nameRow.length > 1 ? nameRow[0] + '...' : nameRow[0];
				ctx.fillText(textName, (1181 - ctx.measureText(textName).width) / 2, 1275);
				ctx.drawImage(that.shareQr, 256, 513, 668, 668);
				// 668 513 1181 46  1227 32 
				ctx.draw(true, setTimeout(function() {
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						success: function(res) {
							that.shareImg = res.tempFilePath
							that.isShare = true
							uni.hideLoading()
						}
					})
				}, 100))
			},

		}
	}
</script>

<style scoped>
	.container {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: -webkit-linear-gradient(top, #3080e8, #19e8db);

	}

	.container .name {
		font-size: 48rpx;
		color: #fff;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.container .white {
		width: 650rpx;
		height: 770rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin: 20rpx auto;
	}

	.white .title {
		display: flex;
		padding: 20rpx;
		align-items: center;
	}

	.white .title image {
		width: 50rpx;
		height: 50rpx;
	}

	.white .title text {
		color: #fc8f54;
		font-size: 36rpx;
	}

	.t-text {
		color: #333;
		font-size: 36rpx;
		text-align: center;
		font-weight: bold;
	}

	.ewm {
		width: 430rpx;
		height: 430rpx;
		margin: 70rpx auto;
		display: block;
	}

	.btn-active {
		width: 280rpx;
		height: 70rpx;
		background-image: linear-gradient(0deg, #2a82e4 0%, #22b5e0 59%, #19e8db 100%);
		border-radius: 10rpx;
		text-align: center;
		line-height: 70rpx;
		color: #fff;
		margin: 70rpx auto;
	}

	.layer-use {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
	}

	.share-content {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.share-content image {
		width: 640rpx;
		height: 961rpx;
		margin-bottom: 30rpx;
	}

	.share-content view {
		width: 375rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #fff;
		background: linear-gradient(to right, #19e8db, #3080e8);
		/* 标准的语法 */
		border-radius: 50rpx;
	}

	canvas {
		position: absolute;
		top: -99999999rpx;
		left: 0;
	}

	.bottom-cont {
		height: 80rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
	}

	.fixed-nav {
		position: absolute;
		width: 100%;
		height: 80rpx;
		top: 0;
		left: 0;
		background: #fff;
		z-index: 999;
	}

	.bottom-cont>view {
		flex: 1;
		height: 80rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.bottom-cont>view text:nth-child(1) {
		font-size: 28rpx;
		color: #5d5d5d;
	}

	.bottom-cont>view text:nth-child(2) {
		width: 100rpx;
		height: 8rpx;
		display: block;
		background: linear-gradient(to right, #19e8db, #3080e8);
		/* 标准的语法 */
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50rpx);
		border-radius: 8rpx;
	}

	.save {
		width: 600rpx;
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		margin: 0 auto;
		background: #3080e8;
		font-size: 28rpx;
		color: #fff;
		border-radius: 8rpx;
	}
</style>
